Top Tools to Learn React Quickly (With Free & Paid Resources)

A JavaScript package is used to create user interfaces using React. Visit the React documentation homepage or the javatpoint tutorial to learn more about React.

You can easily create a React program using HTML to obtain operation. It is operated to an understanding of React technology. However, the npm and Node.js must be set up in a production environment to use React.

• Use React
• Study React
• Keeping Current information

Use React

React is created with a progressive adoption mind. You can use react in whichever quantity for anywhere for each operation. You want to learn more about React, give a basic HTML page some interactivity, or begin a complicated React-powered program.

The following steps exist to use React with the HTML and JS pages. The javascript is used on the script tag of the html page.

• Create html page and its elements.
• Use the online link of the React development
• Use script tag and react development program
• Use the component, class, and function of the react
• Shows the output and operational validation

Playgrounds Online

• If you want to learn, use an online coding playground to experiment with React. The CodePen, CodeSandbox, or Stackblitz are IDEs to try a basic program or template.
• This HTML file can be downloaded, edited, and opened from the local file system. This file system in your browser is used as your text editor.
• We can use it for the runtime code to develop any react.js applications.

Improve a website with React

• The React is added to an HTML page easily. You can either progressively increase prominence or limit it. It helps to a small number of dynamic widgets on the website.

New React App Creation

• A basic HTML page with script elements can be the best choice for beginning a React project. The setup only takes a minute to develop any basic coding page!
• You can switch to a more integrated structure as your application expands. We recommend several JavaScript toolchains for more complex applications.
• Each of the rules allows you to utilise the robust React ecosystem fully. The react page can operate with little to no configuration on the web page.

Study React

React attracts individuals with a variety of backgrounds and learning preferences. You can find this helpful area, whether for theoretical or practical approaches.

1. How to Learn a Javatpoint React Tutorial
2. Learn things gradually with react documentation.

• Initial Cases
  React examples with a live editor are available on the React homepage.
  If you are unfamiliar with React, observe how it affects the outcome, then Change the code.
• React for beginners
  Check out the overview of React by javatpoint.com or https://legacy.reactjs.org/tutorial/tutorial.html official website. It is an approachable manner while introducing the key ideas of Reacts.
• React For Designers
  If you have design experience, these materials are a wonderful place to start React.js.
• Resources for JavaScript
  The React manual has fundamental expertise in JavaScript programming. It becomes more challenging even if you are not an expert in learning JavaScript and React simultaneously.
• Advanced Ideas
  Once familiar with the fundamental ideas and have experimented with React, you can be interested in more complex subjects. In this part, you will learn about the potent but less-used React capabilities like context and refs.
• Refer to the API
  When you want to know details of the particular React API, you can use the API section or code. You may find information on the operation of setState() and the purposes of various lifecycle methods, for instance, React.Component API reference.

Continuing to Learn

• The React team’s updates are available exclusively on their blog.
• Release notes and deprecation notices will be provided there if they are significant.
• Although you won’t miss anything important if you read the blog, you may also follow the @reactjs account on the social network.
• The CHANGELOG.md file is in the React repository. It works on the Releases website to provide a thorough change log for each release of React.

Prerequisite for React getting Started

The following points are required for the react development.

• HTML and CSS are familiar to the user or coder.
• JavaScript and programming fundamentals are required.
• DOM knowledge is a most basic requirement.
• Knowledge of ES6’s features and syntax.
• Global installation of npm and node.js.

Examples

The following examples help to start, learn and practice React in html and other languages.

Example 1:

The given example shows the basic example with a simple message. We can use an online file link with the html and script page.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <script src = “https://unpkg.com/react@18/umd/react.development.js” crossorigin></script>  
5. <script src = “https://unpkg.com/react-dom@18/umd/react-dom.development.js” crossorigin></script>  
6. <script src = “https://unpkg.com/@babel/standalone/babel.min.js”></script>  
7. <style>  
8. #demo1{  
9. background-color: orange;  
10. border: 1px solid black;  
11. width: 370px;  
12. }  
13. </style>  
14. </head>  
15. <body>  
16. <div id = “demo1”>  
17. <b> React Getting Started </b>  
18. <div id = “mycontainer”></div>  
19. </div>  
20. <script type=”text/babel”>  
21. // Use the function for the message to display on the div tag  
22. function Hello() {  
23. return <h1>Hello Student for the react getting started!</h1>;  
24. }  
25. // Create root for the react and show the message of the function  
26. const container_name = document.getElementById(‘mycontainer’);  
27. const root = ReactDOM.createRoot(container_name);  
28. // Get output and place on the container  
29. root.render(<Hello />)  
30. </script>  
31. </body>  
32. </html>  

Output:

The output shows a basic message on the web page.

Example 2:

The given example shows the basic example with the required message. We can use an online file link with the html and script page. The react uses a name and ID tag to get a message. We can use static values for the ID and name tag.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <script src = “https://unpkg.com/react@18/umd/react.development.js” crossorigin></script>  
5. <script src = “https://unpkg.com/react-dom@18/umd/react-dom.development.js” crossorigin></script>  
6. <script src = “https://unpkg.com/@babel/standalone/babel.min.js”></script>  
7. <script src = “https://unpkg.com/react@18/umd/react.production.min.js” crossorigin></script>  
8. <script src = “https://unpkg.com/react-dom@18/umd/react-dom.production.min.js” crossorigin></script>  
9. <style>  
10. #demo1{  
11. background-color: orange;  
12. border: 1px solid black;  
13. width: 370px;  
14. }  
15. </style>  
16. </head>  
17. <body>  
18. <div id = “demo1”>  
19. <b> React Getting Started with id and name </b>  
20. <div id = “mydiv”></div>  
21. </div>  
22. <script type = “text/babel”>  
23. //Use class for the message  
24. class HelloMessage extends React.Component {  
25. // function call name and id for message  
26. render() {  
27. return <div>Hello Id: {this.props.id}  name:{this.props.name}</div>;  
28. }  
29. }  
30. //create react root to show the message  
31. const container = document.getElementById(‘mydiv’);  
32. const root = ReactDOM.createRoot(container);  
33. // Get output and place on the container  
34. root.render(<HelloMessage id=”Javatpoint” name=” website” />);  
35. </script>  
36. </body>  
37. </html>  

Output:

The output shows a basic message on the web page.

Example 3:

The given example uses the html tags and their values. We can use table elements, header values, and information using react.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <script src = “https://unpkg.com/react@18/umd/react.development.js” crossorigin></script>  
5. <script src = “https://unpkg.com/react-dom@18/umd/react-dom.development.js” crossorigin></script>  
6. <script src = “https://unpkg.com/@babel/standalone/babel.min.js”></script>  
7. <style>  
8. #demo1{  
9. background-color: orange;  
10. border: 1px solid black;  
11. width: 370px;  
12. }  
13. </style>  
14. </head>  
15. <body>  
16. <div id = “demo1”>  
17. <b> React Getting Started with Table </b>  
18. <div id = “mycontainer”></div>  
19. </div>  
20. <script type=”text/babel”>  
21. // Use the function for the message to display on the div tag  
22. function Hello() {  
23. return  <table>  
24. <thead>  
25. <tr>  
26. <th>Name</th>  
27. <th>Job</th>  
28. <th>Payment</th>  
29. </tr>  
30. </thead>  
31. <tbody>  
32. <tr>  
33. <td>Charlie</td>  
34. <td>Designer</td>  
35. <td>10,000</td>  
36. </tr>  
37. <tr>  
38. <td>Mruna</td>  
39. <td>Developer</td>  
40. <td>15,000</td>  
41. </tr>  
42. <tr>  
43. <td>Deepa</td>  
44. <td>Analyst</td>  
45. <td>18,000</td>  
46. </tr>  
47. <tr>  
48. <td>Rima</td>  
49. <td>Tester</td>  
50. <td>12,000</td>  
51. </tr>  
52. </tbody>  
53. </table>;  
54. }  
55. // Create root for the react and show the message of the function  
56. const container_name = document.getElementById(‘mycontainer’);  
57. const root = ReactDOM.createRoot(container_name);  
58. // Get output and place on the container  
59. root.render(<Hello />)  
60. </script>  
61. </body>  
62. </html>  

Output:

The output shows a table and its information on the web page.

A Stateful Element

A component can store internal state data (accessible via this.state) and accept input data (accessed via this.props). Re-invoking render() will update the rendered markup whenever a component’s state data changes.

Example:

The example shows the static component with the function, class and other elements. We can see the time for the second unit. We can restart the timer after the button clicks.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <script src = “https://unpkg.com/react@18/umd/react.development.js” crossorigin></script>  
5. <script src = “https://unpkg.com/react-dom@18/umd/react-dom.development.js” crossorigin></script>  
6. <script src = “https://unpkg.com/@babel/standalone/babel.min.js”></script>  
7. <script src = “https://unpkg.com/react@18/umd/react.production.min.js” crossorigin></script>  
8. <script src = “https://unpkg.com/react-dom@18/umd/react-dom.production.min.js” crossorigin></script>  
9. <style>  
10. #demo1{  
11. background-color: orange;  
12. border: 1px solid black;  
13. width: 370px;  
14. }  
15. </style>  
16. </head>  
17. <body>  
18. <div id = “demo1”>  
19. <b> React Getting Started with Timer </b>  
20. <div id = “mydiv”></div>  
21. </div>  
22. <script type = “text/babel”>  
23. //create react root to show the message  
24. const container = document.getElementById(‘mydiv’);  
25. const root = ReactDOM.createRoot(container);  
26. //Use class with the static component  
27. class Timing extends React.Component {  
28. constructor(props) {  
29. super(props);  
30. //Initial the value with the 0 second  
31. this.state = { seconds: 0 };  
32. }  
33. // Increment with each second and shows on web page  
34. tick() {  
35. this.setState(state => ({  
36. seconds: state.seconds + 1  
37. }));  
38. }  
39. // Set interval for the timer function  
40. componentDidMount() {  
41. this.interval = setInterval(() => this.tick(), 1000);  
42. }  
43. componentWillUnmount() {  
44. clearInterval(this.interval);  
45. }  
46. // Use the function and show seconds as a timer  
47. render() {  
48. return (  
49. <div>  
50. Seconds: {this.state.seconds}  
51. </div>  
52. );  
53. }  
54. }  
55. // Get timer output and place on the container  
56. root.render(<Timing />);  
57. </script>  
58. </body>  
59. </html>  

Output:

The output shows the basic timer on the web page.

Basic Applications

We can construct a simple Todo app using properties and states. In this illustration, the state keeps track of the user’s entered text and the present set of items. The event handlers will be gathered and applied using event assignments.

Example:

The example shows the basic application with the function, class and elements. We can operate the to-do list and show the items on the list.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <script src = “https://unpkg.com/react@18/umd/react.development.js” crossorigin></script>  
5. <script src = “https://unpkg.com/react-dom@18/umd/react-dom.development.js” crossorigin></script>  
6. <script src = “https://unpkg.com/@babel/standalone/babel.min.js”></script>  
7. <script src = “https://unpkg.com/react@18/umd/react.production.min.js” crossorigin></script>  
8. <script src = “https://unpkg.com/react-dom@18/umd/react-dom.production.min.js” crossorigin></script>  
9. </head>  
10. <body style=”background:aqua;”>  
11. <b> React Getting Started with TO DO List </b>  
12. <div id = “mydiv”></div>  
13. <script type = “text/babel”>  
14. const container = document.getElementById(‘mydiv’);  
15. const root = ReactDOM.createRoot(container);  
16. class TodoApp extends React.Component {  
17. constructor(props) {  
18. super(props);  
19. this.state = { items: [], text: ” };  
20. thisthis.handleChange = this.handleChange.bind(this);  
21. thisthis.handleSubmit = this.handleSubmit.bind(this);  
22. }  
23. //Show the web page with the form and information  
24. render() {  
25. return (  
26. <div>  
27. <h3>TO-DO List</h3>  
28. <TodoList items={this.state.items} />  
29. <form onSubmit={this.handleSubmit}>  
30. <label htmlFor=”new-todo”>  
31. </label>  
32. <input  
33. id=”new-todo”  
34. onChange={this.handleChange}  
35. value={this.state.text}  
36. />  
37. <button>  
38. Add {this.state.items.length + 1}  
39. </button>  
40. </form>  
41. </div>  
42. );  
43. }  
44.   
45. handleChange(e) {  
46. this.setState({ text: e.target.value });  
47. }  
48.   
49. handleSubmit(e) {  
50. e.preventDefault();  
51. if (this.state.text.length === 0) {  
52. return;  
53. }  
54. // Shows the new item with the button onclick button  
55. const newItem = {  
56. text: this.state.text,  
57. id: Date.now()  
58. };  
59. this.setState(state => ({  
60. items: state.items.concat(newItem),  
61. text: ”  
62. }));  
63. }  
64. }  
65. //Use class with the component  
66. class TodoList extends React.Component {  
67. render() {  
68. return (  
69. <ul>  
70. {this.props.items.map(item => (  
71. <li key={item.id}>{item.text}</li>  
72. ))}  
73. </ul>  
74. );  
75. }  
76. }  
77. // Get the list’s item as an output for the container  
78. root.render(<TodoApp />);  
79. </script>  
80. </body>  
81. </html>  

Output:

The output shows the do list’s items on the web page.

A Function with External Plugins

You can interact with different libraries and frameworks using React. This example converts the value of the textarea> in real time using amazing, an external Markdown library.

Example:

The example shows the basic application with the external plugin. We can operate the form value using function, class and elements. We can handle user interactive data using react and jxs.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <script src = “https://unpkg.com/react@18/umd/react.development.js” crossorigin></script>  
5. <script src = “https://unpkg.com/react-dom@18/umd/react-dom.development.js” crossorigin></script>  
6. <script src = “https://unpkg.com/@babel/standalone/babel.min.js”></script>  
7. <script src = “https://unpkg.com/react@18/umd/react.production.min.js” crossorigin></script>  
8. <script src = “https://unpkg.com/react-dom@18/umd/react-dom.production.min.js” crossorigin></script>  
9. </head>  
10. <body style=”background:aqua;”>  
11. <b> React Getting Started with The External Component </b>  
12. <div id = “mydiv”></div>  
13. <script type = “text/babel”>  
14. const container = document.getElementById(‘mydiv’);  
15. const root = ReactDOM.createRoot(container);  
16. class TodoApp extends React.Component {  
17. constructor(props) {  
18. super(props);  
19. this.state = { items: [], text: ” };  
20. thisthis.handleChange = this.handleChange.bind(this);  
21. thisthis.handleSubmit = this.handleSubmit.bind(this);  
22. }  
23. //Show the web page with the form and information  
24. render() {  
25. return (  
26. <div>  
27. <h3>User Information </h3>  
28. <TodoList items={this.state.items} />  
29. <form onSubmit={this.handleSubmit}>  
30. <label htmlFor=”new-todo”>  
31. </label>  
32. <textarea  id=”new-todo”  
33. onChange={this.handleChange}  
34. value={this.state.text}></textarea>  
35. <p>  
36. </p>  
37. <button>  
38. Add  
39. </button>  
40. </form>  
41. </div>  
42. );  
43. }  
44. handleChange(e) {  
45. this.setState({ text: e.target.value });  
46. }  
47. handleSubmit(e) {  
48. e.preventDefault();  
49. if (this.state.text.length === 0) {  
50. return;  
51. }  
52. // Shows the new item with the button onclick button  
53. const newItem = {  
54. text: this.state.text,  
55. id: Date.now()  
56. };  
57. this.setState(state => ({  
58. items: state.items.concat(newItem),  
59. text: ”  
60. }));  
61. }  
62. }  
63. //Use class with the component  
64. class TodoList extends React.Component {  
65. render() {  
66. return (  
67. <b>  
68. {this.props.items.map(item => (  
69. <p key={item.id}>{item.text}</p>  
70. ))}  
71. </b>  
72. );  
73. }  
74. }  
75. // Get the list’s item as an output for the container  
76. root.render(<TodoApp />);  
77. </script>  
78. </body>  
79. </html>  

Output:

The output shows the form’s information on the web page.

Conclusion

The react with html page helps to operate and handle data and web pages. It is easy, simple and fast for the functionality.