Chapter 2 – Creating React Projects With Create React App

No. 1101, 24th Main, JP Nagar, 1st Phase, Bangalore 560 078
Node >= 8.16.0
NPM >= 5
create-react-app lets you get started within seconds without any configurations. It is the easiest way to run your react-project quickly. It lets you focus on code, not on build tools and configurations. Under the hood, it uses Webpack, Babel, ESLint, and other projects to power our app.
Now let’s create our first app. You need to execute the following command in your terminal. It will take some time to install. Name of our first project will be my-first-app.
Throughout this course, we will use visual studio code as our code editor. You can easily install this from https://code.visualstudio.com/docs/setup/setup-overview and, it is FREE.
Edit src/App.js
and save to reload.
Welcome to Tech diagonal tutorials
App.js
This file has import statements, export statement and a react component. Now it is time for you to understand each of these in detail.
import React from 'react'; //Importing default export import logo from './logo.svg'; //Importing logo.svg as logo import './App.css'; //Importing css file
import MY_NAME from ADDRESS
export default App;
export default MY_NAME
In this example, App is a React component. Here function App returns the <div> tag with the className = “App”.
function App() { return (); }<img src={logo} className="App-logo" alt="logo" /> Welcome to Tech diagonal tutorials
Learn React
index.js file is a JavaScript entry point. This filename should not be changed. This file has import statements and ReactDOM.render method.
ReactDOM.render(, document.getElementById('root') //index.html has a container with the name root );
ReactDOM.render(element, container)
This file contains CSS classes.