React From The Beginning: Create Your First React App

Introduction

React is one of the most popular Javascript front-end frameworks for building web applications. It is developed by Facebook and a community of individual developers and companies. React is constantly evolving and new features are added constantly.

Why Use React.js?

1. Easy to Learn: Since it requires a minimal understanding of Javascript and HTML, the learning curve is fairly low. In some cases, we will even be using the “vanilla DOM JavaScript API”, which means that the programmer doesn’t need to learn anything new before getting started.

System Setup

The first prerequisite which needs to be installed on the development system is Node.js and NPM (Node package manager). Npm comes bundled with Node.js.

Getting Started: Installing React

First, go to the terminal and then type,

PASS  src/App.test.js
✓ renders without crashing (18ms)Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.277s
Ran all test suites related to changed files.Watch Usage
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.

Exploring Our First App

Let’s start by looking at the first application that is created by create-react-app:

Creating Our First Component

First, open up your code in your editor of choice and also run npm start in that directory. Next, we’ll do something fun: deleting the entire contents of App.js and App.css. Open up both files, and delete every line of them! Now that we have a nice blank start, it’s time to start learning React with ES2015!

import React from 'react';
const App = () => {
return (<div className="App">Hello World!</div>);
};

Wait, What Is JSX?

If you already know what JSX is, you can skip this, but if not, here’s a quick summary:

Returning To Our Component

We have our component written, but if you look at the browser, everything is blank right now! We need to do one more thing in ES2015 to make sure other files can take advantage of any code written in this file: export.

export default App;

Embedding Stylesheets In Our Component

One trick that create-react-app does by default that is a nice thing to learn is embedded stylesheets for your components. Since we have a blank App.css file, let’s throw something in there to make our component more noticeable. Back at the top of our component (in src/App.js), below our import React line, add the following:

import './App.css';
.App {
border: 2px solid black;
text-align: center;
background: #f5f5f5;
color: #333;
margin: 20px;
padding: 20px;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
  1. Where to render that component
<App />
<App></App>

Conclusion

Congratulations! You now have the start of a basic functional component in React with very little work! You have webpack and babel and everything else all figured out and installed for you but without a lot of fuss or bother! This is a very nice, very clean way to get started with React development.

Software Developer || Freelancer|| React js|| Vue js