Table of Contents
Install npm
1. Download the Windows installer from the Nodes.js® web site.
2. Run the installer (the .msi file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).
verify the installation
Test npm: To see if NPM is installed
npm -v
This should print NPM’s version number so you’ll see something like this:
5.5.1
Create new react project with npm
1. Create new react project with npm
npx create-react-app my-app
this will create a react app with my-app name.
To run the react app
cd my-app
npm start
2. Create new react project with StackBlitz
https://stackblitz.com
You can code and run the react application on StackBlitz.
Reactjs File Structure
src/App.css
This css file contains the styles required for App.js file
src/App.js
The App component is essentially the top most component in a React-based application, from whom all other components are children of.
src/App.test.js
This file contains the unit test cases of App.js file.
The CSS file corresponding to index.js
src/index.js
This is the javascript file corresponding to index.html. This file has the following line of code which is very significant.
ReactDOM.render(<App />, document.getElementById(‘root’));
The above line of code is telling that App Component ( will cover App Component soon) has to be loaded into an html element with id root. This is nothing but the div element present in index.html.
Render a React element into the DOM in the supplied container and return a reference.
package.json
This File has the list of node dependencies which are needed.
Why this HTML code is placed in between JavaScript code?
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
Lets go to our next tutorial where we will discuss below points :
Part 2 – JSX in React
In this tutorial, we will understand below topics –
– What is JSX?
– How to use JSX in React?
https://onlyfullstack.blogspot.com/2019/11/jsx-in-react.html
Source Code
You can edit and play with the react examples on below stackblitz site –
https://stackblitz.com/@onlyfullstack
React Tutorial
https://onlyfullstack.blogspot.com/2019/11/react-tutorial.html