Where do I start when I want to build a React App based existing JS?
source link: https://dev.to/adamdsherman/where-do-i-start-when-i-want-to-build-a-react-app-based-existing-js-pb
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Where do I start when I want to build a React App based existing JS?
So, I'm the first to admit I really struggle with React. I'm fine with JS and JQuery and have even completed many, many React tutorials. But when it comes to converting an existing JavaScript script into a React component, I'm completely stumped.
Right now I have a JavaScript script that is moderately complex.
It reads user data from and object in an external .js file.
Based off that data (or combinations of that data) the script writes elements to the DOM or fires off a modal.
So, for example, a simple if statement might be:
if (userdata.userage > 50 && userdata.userjob.userincome > 100000){
$(".js-modal-body").load(info[key].content);
$('#alertModal').foundation('open');
Cookies.set(modalName, '1', { expires: 7 })
}
And so on.
I won't paste the whole code in here, but basically it consists of:
- An import, brining in the userData object from a user.js file.
- A stand-alone helper function that returns the user's age based of their inputted date-of-birth and today's date.
- A series of if statements like the one above. Some if statements fire off Modals, some write new card elements to the DOM. Some also create cookies.
My question is where do I start when want to convert this to react?
Discussion (1)
I'm still on the learning curve of JavaScript, and React, but I know enough to say you're not thinking about it correctly. React is a JavaScript library which helps you build the user interface side of your app. Business logic would be handled through helper functions called by your React components (I might be getting that wrong, others can correct me.
I recommend thinking about the layout of the app you want to create, which will in turn help you to think about the components that make up the app. Then, think about the business logic and what data needs to be passed amongst the components to make it all work.
I recommend the course here: react-tutorial.app/
I'm currently doing the JavaScript one, and for me it's been excellent. I'm doing the React course next.
I also suggest getting acquainted with NodeJS and create-react-app, they are both essential starting points. Maybe you've already done that, I don't know.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK