Context of React
React is a Open Source JavaScript library for building user interfaces. Created and supported by Facebook.
You can find the documentation here: https://reactjs.org/tutorial/tutorial.html#overview
If you're a web developer that can handle HTML, CSS and JavaScript you can try React without Node.js or any other complex tool to manage this.
Easy as a cake!
1. Create a index.html with react, react-dom and babel references.
You can use this on your text editor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Local</title>
<!-- Import the React, React-Dom and Babel libraries from unpkg -->
<script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
</script>
</body>
</html>
2. Add text/babel script tag
Replace the script tag:
<script type="text/javascript">
</script>
for
<script type="text/babel">
</script>
3. Write any react example on the web in your new text/babel script tag
You have the most basic environment to try react, let's give it a try!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Local</title>
<script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Obtain the root
const rootElement = document.getElementById('root')
// Create a ES6 class component
class ShoppingList extends React.Component {
// Use the render function to return JSX component
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Create a function to wrap up your component
function App(){
return(
<div>
<ShoppingList name="@luispagarcia on Dev.to!"/>
</div>
)
}
// Use the ReactDOM.render to show your component on the browser
ReactDOM.render(
<App />,
rootElement
)
</script>
</body>
</html>
And that's it!
You can drag this index.html file to the browser and you will get your first try of react interface.
It's important to be clear that this way is the most weak and simple way to build a react application, if you want to explore more you can learn about react basics on this free course: https://egghead.io/courses/the-beginner-s-guide-to-reactjs
I hope you can give it a try, there's always a easy and simple way to do anything.
Top comments (19)
Really like this. I think the preprocessors/packers/etc. really are the hardest part about React, as opposed to the tool itself. And it's easy to lose your mind overcoming the tooling steps. Would definitely recommend this approach to anyone not already super comfortable with the JS ecosystem.
Is there a difference between React or ReactJS, and React or React Native? Also what's the difference between NodeJS V8 and Chromes V8 engines? Can you write React Native without NodeJS? Also, why you want to use NodeJS in the first place for ReactJS web applications? :D
Ok,
React === ReactJS === React.js
React !== React Native: medium.com/@alexmngn/from-reactjs-...
Relationship between V8 and Node: stackoverflow.com/questions/426161...
This post is an example to how to “try React without Node” as a middleware to parse the jsx code to render it as a common JavaScript.
Most of the tools to start with React requires Node to start. Like, create-react-app, next.js, Gatsby, etc. This is a simple, basic and fast way to read and understand how React is just a way to write web apps. :)
WOW! Thank you very much, sir, for clearing my confusion! <3 Respect! :)
You’re welcome, Liudas!
Thank you, I wanted so much to find this kind of tutorial, tooling in React is just cumbersome, opinionated and tiresome.
Sure!
This is just a simple and basic example, to get hands on react. I don’t recommend this on production btw.
I guess the best approach to learn react in today is using create-react-app.
Yes, absolutely, it's just that you don't teach someone to swim at the deep end of the pool, you get just as scared when learning these new ideas and concepts, so (in my case anyways) I would have just dropped it a few weeks ago, I'll just keep going now.
Sure! Another great resource it's using CodeSandbox.com, stackblitz.com or Repl.it. They offer a good environment to start coding on the fly.
how's about routing?
This is SOOO much better than having to install and configure Node.js! I just want to create React applications with my existing file structure. Thanks for this! :)
So glad you liked it! I think it needs to be updated...
Question, can i combine scripts with type=“module” and somehow combine it with your method and have a complete react app without node or a bundler, but still maintain nice file structure and classes?
how ro import app.js to this html react project?
Can I use functional components this way to use hooks or is it impossible
did you find any way to do this?
here there is no node modules. but i used node modules(big-calendar,material-ui,moment) then how can i run in htlm file could you please explain
Can I have a script tag in the html file in which I link to a jsx ?
< script type="text/babel" src="/link/to/jsx" >< /script >
I've try and it works.