DEV Community

Alejandro
Alejandro

Posted on

How I started with React

Well Hello, this is my first post here and I want to share how I started to learn react.
At the beginning I was overwhelmed with so many tools I needed to do a hello world, In react, the create-react-app, and other NPM packages, that I needed, and I didn't quite understood why I needed to have this "complicated" workspace to do just a simple Hello World...

While I was in the developer console, watching the source code of many sites, and the source code of my create-react-app example, I've notice that Adding just just the "react.development.js" and "/react-dom.development.js", I could invoke components directly to with inline JS and adding "babel.min.js" I could do that with in-line JSX or well not JSX, Babel, and this seemed pretty cool for me at that moment.

Just with <script src='URL'> and following url's, and to insert the in-line <script type="text/babel>***code***</script> and you are ready to Go!!!
https://unpkg.com/react@16/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js
https://unpkg.com/babel-standalone@6/babel.min.js

Now the bad part here is that It's HORRIBLE with performance, the first version of GitHub Page has this kind of React, and well, as simple as it is, I have to wait for it to render, but to start working your way in to react.

It's a great way, because the community will talk about all this tools, that you don't really get to understand because you don't yet see the need for them, and this way you'll bump in to the problems or improvements that this tools offer.

Adding a little bit of the W3.CSS and Font Awesome styles to the components, I managed to pull together something like this (actually this is a part of my first react page). Feel free to explore, and use this source, and well, I'm working (at least on my local computer, use the W3.CSS with React and recreate the W3.CSS templates so I can use them in a much cleaner way I'll upload something about this on github soon.

Top comments (0)