Replacing jQuery with React based modules

[pixeleet]

Hey Man,

Great job so far, I was thinking about making something exactly like this, so I'm really glad I found someone already working on it. However I would really love to get rid of the underlying jQuery dependency too.

Would you be interested in working together on getting rid of jQuery and having Semantic UI, React Components which are as native as possible?

Let me know.
Cheers,
David

[jessy1092]

Hi pixeleet,

Thanks for your encouragement.
The react-semantify was used to integrated with react quickly, so I created through classname Abbreviation.

I'm also thinking about getting rid of the underlying jQuery dependency. Like material-ui, react-bootstrap, etc. But I have no idea how to start. It's a huge project.
I'm interested in your plan. Count me in. 👍

Many thanks,
Lee

[pixeleet]

I'll make a small example of what I think would be nice and send a PR with it. ;)

[ChristopherRabotin]

Any update on this?

[pixeleet]

Let's get together later today, I actually kinda need to create a
react-only version of semantic.

2016-02-09 8:58 GMT+01:00 Chris notifications@github.com:

Any update on this?

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[ChristopherRabotin]

I'm up for working on this with someone too. I don't have a whole bunch of
experience with React though, only a few months.

On Tue, Feb 9, 2016, 08:33 David Lonyai notifications@github.com wrote:

Let's get together later today, I actually kinda need to create a
react-only version of semantic.

2016-02-09 8:58 GMT+01:00 Chris notifications@github.com:

Any update on this?

—
Reply to this email directly or view it on GitHub
<
#20 (comment)

.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[pixeleet]

Well, as far as I see, most of the elements are pretty easy to port to
React, the only hurdle I see is global bookkeeping of elements. Whereas
with jQuery you would select an element like $('.ui.sidebar').toggle()
we'd have to avoid such references to the DOM since React does a pretty
good job hiding it. So you'd have something like:
this.getComponent('sidebar').toggle() for instance. So your component's
componentDidMount and componentWillUnmount would act as init and
destroy equivalents of functions in semantic's implementation, to place
your component in a global store so you'd be able to interact with it
from other components.

This might be too messy, so you might wanna introduce actions. If you do,
you'd have to bring a Flux implementation or a Relay implementation in the
game, which would couple our implementation to it, which I don't like. So
that's kinda where I'm in the thought process right now.

2016-02-09 10:06 GMT+01:00 Chris notifications@github.com:

I'm up for working on this with someone too. I don't have a whole bunch of
experience with React though, only a few months.

On Tue, Feb 9, 2016, 08:33 David Lonyai notifications@github.com wrote:

Let's get together later today, I actually kinda need to create a
react-only version of semantic.

2016-02-09 8:58 GMT+01:00 Chris notifications@github.com:

Any update on this?

—
Reply to this email directly or view it on GitHub
<

#20 (comment)

.

—
Reply to this email directly or view it on GitHub
<
#20 (comment)

.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[ChristopherRabotin]

Would it not be simpler to have each component manage a simple state and
pass a prop which handles the toggle. That's how react bootstrap works, in
the case of modals for example.

On Tue, Feb 9, 2016, 11:06 David Lonyai notifications@github.com wrote:

Well, as far as I see, most of the elements are pretty easy to port to
React, the only hurdle I see is global bookkeeping of elements. Whereas
with jQuery you would select an element like $('.ui.sidebar').toggle()
we'd have to avoid such references to the DOM since React does a pretty
good job hiding it. So you'd have something like:
this.getComponent('sidebar').toggle() for instance. So your component's
componentDidMount and componentWillUnmount would act as init and
destroy equivalents of functions in semantic's implementation, to place
your component in a global store so you'd be able to interact with it
from other components.

This might be too messy, so you might wanna introduce actions. If you do,
you'd have to bring a Flux implementation or a Relay implementation in the
game, which would couple our implementation to it, which I don't like. So
that's kinda where I'm in the thought process right now.

2016-02-09 10:06 GMT+01:00 Chris notifications@github.com:

I'm up for working on this with someone too. I don't have a whole bunch
of
experience with React though, only a few months.

On Tue, Feb 9, 2016, 08:33 David Lonyai notifications@github.com
wrote:

Let's get together later today, I actually kinda need to create a
react-only version of semantic.

2016-02-09 8:58 GMT+01:00 Chris notifications@github.com:

Any update on this?

—
Reply to this email directly or view it on GitHub
<

#20 (comment)

.

—
Reply to this email directly or view it on GitHub
<

#20 (comment)

.

—
Reply to this email directly or view it on GitHub
<
#20 (comment)

.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[loris]

Yes, a global store for making UI components communicate looks like a react anti-pattern to me

[balupton]

Let's get together later today, I actually kinda need to create a react-only version of semantic.

If this is going to be a group thing, I'm down for that too.

[pixeleet]

Yeah that's why I wouldn't do that, open for suggestions
On Tue 9 Feb 2016 at 15:13 Benjamin Lupton notifications@github.com wrote:

If this is going to be a group thing, I'm down for that too.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[pixeleet]

When do you guys wanna get together? I'm in UTC/GMT+1 Amsterdam time zone.

[ChristopherRabotin]

Same timezone here, so a Hangouts would work.

Otherwise we can start with a Google docs or just a few simple components
to test things out? I'm going to start rewriting the UI of my company in
the coming days so I can start working on example basic components.

On Tue, Feb 9, 2016, 16:59 David Lonyai notifications@github.com wrote:

When do you guys wanna get together? I'm in UTC/GMT+1 Amsterdam time zone.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[pixeleet]

Good, I'll be sketching some stuff up too, let's see where we end up

2016-02-09 18:18 GMT+01:00 Chris notifications@github.com:

Same timezone here, so a Hangouts would work.

Otherwise we can start with a Google docs or just a few simple components
to test things out? I'm going to start rewriting the UI of my company in
the coming days so I can start working on example basic components.

On Tue, Feb 9, 2016, 16:59 David Lonyai notifications@github.com wrote:

When do you guys wanna get together? I'm in UTC/GMT+1 Amsterdam time
zone.

—
Reply to this email directly or view it on GitHub
<
#20 (comment)

.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[balupton]

Yeah that's why I wouldn't do that, open for suggestions

Does that mean you don't want me help? Not sure what is meant by that. Confused.

When do you guys wanna get together? I'm in UTC/GMT+1 Amsterdam time zone.

I'm in Perth, Western Australia (GMT+8) - however I'm up whenever.

Otherwise we can start with a Google docs or just a few simple components
to test things out?

Google doc sounds best. Better than chat when people are offline.

I'm up for working on this with someone too. I don't have a whole bunch of
experience with React though, only a few months.

I'm new to React, but this seems like the perfect way to get started!

[balupton]

Would any of these be of any use?

• https://github.com/hallister/semantic-react
• https://github.com/jhudson8/react-semantic-ui
• https://github.com/TechnologyAdvice/stardust