React js t1 - introduction
0 likes158 views
This document introduces ReactJS, including that it is a JavaScript library created by Facebook in 2011 for building fast and interactive user interfaces with isolated components. It discusses that ReactJS allows building sizable and complex UIs with small isolated code, and that it is technically a library, not a framework. It then provides steps for setting up a React environment both using create-react-app and for manual setup.
React js t1 - introduction
- 1. ReactJs : Tutorial-01-Introduction React / React.js / ReactJS JavaScript Library Fast & Interactive UI Building In 2011 by FaceBook - Software Engineer, Jordan Walke Sizable and Complex UIs with Small – Isolated code Sometimes React called Framework but technically it’s a Library. React Native is a framework (like Vue.js and Angular) React.JS version V16.13.1 (July 2020). (reactjs.org) Create-react-app version 2.0 supports Babel 7, webpack 4, and Jest23. Thinking in React Component React Component is a bunch of independent, isolated and reusable bunch of code. Like a simple function, it can call, pass some input and they render some output. Reuse components, Merge them, Complex UI. Setting up a React Environment Step: 1 : Install node.js (nodejs.org) Step: 2 : check version of nodejs and npm Step: 3 : Install ReactJs $ npm install –g create-react-app Step: 4 : Create first application $ create-react-app myapp (must be small letters) Step: 5 : It will create myapp folder, change folder using ‘cd’
- 2. ReactJs : Tutorial-01-Introduction $ cd myapp Step: 6: To run the project User/Jainul/myapp$ npm start Manual Setup of a React Environment Step: 1 : Install node.js (nodejs.org) Step: 2 : check version of nodejs and npm Step: 3 : Create a project folder i.e. myapp and go to the folder myapp Step: 4 : Create package.json $ npm init. Step: 5 : Now we will install the packages that we need. Open the terminal or command prompt and run the commands inside the folder myapp/. npm install react --save-dev npm install react-dom --save-dev npm install react-scripts --save-dev Step: 6 : Create a folder src/ where all the js code will come in that folder. All the code for reactjs project will be available in the src/ folder. Create a file index.js and add import react and react-dom, as shown below. Index.js import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, from RTDL Tutorials!</h1>, document.getElementById('root') ); Step: 7 : Create a folder public/ and add index.html in that as shown below <!DOCTYPE html> <html>
- 3. ReactJs : Tutorial-01-Introduction <head> <meta charset="UTF-8" /> <title>ReactJS Demo</title> </head> <body> <div id = "root"></div> </body> </html> We will have the directory structure as shown below… reatproj/ src/ index.js node_modules/ public/ index.html package.json Step: 8 : We have added the commands to compile the final file in package.json as follows: "scripts": { "start": "react-scripts start" }, Step: 9 : To compile the final file run following command: npm start Step: 10 : The URL http://localhost:3000 will open in the browser once the code is compiled as shown below: